<template>
  <div class="td-page">
        <mt-header class="td-header" fixed title="合同名称">
            <router-link to="/orderList" slot="left"><mt-button icon="back"></mt-button></router-link>
        </mt-header>
        <div class="td-warp top88 bgff">
            <div class="pl40 text-left f34 mt40">
                <label class="fc848">合同标题</label>
                <div>{{content.title}}</div>
            </div>
            <div class="pl40 text-left f34 mt40">
                <label class="fc848">合同正文</label>
            </div>
            <div class="pl40 f34 mt40">
            {{content.content}}
            </div>
             <div class="pl40 mt40 f34 oh"> 
                <label class="fc848 pull-left">合同价格</label>
                <div class="pull-right pr40">
                     ￥{{content.price}}&nbsp;元
                </div>
            </div>
            <div class="pl40 mt40 f34 text-left">
                <label class="fc848">附件</label>
            </div>
            <div class="enclosure pl40 mt20 text-left oh" v-if="content.img!='null'">
                <div class="E-info" v-for="img in content.img">
                    <img :src="urlImg+img.b_img" width="50" height="50" @click="showImg(img)">
                </div>
            </div>
            <!-- <div class="add-enclosuer pl40 text-left oh">
                <input type="file" class="file" id="fileupload">
            </div>  -->
            <div class="text-left f28 fcb3b pl40 mt40 mb40">
                <span>提示：双方合作以该此合同的价格为准</span>
            </div>
        </div>
        <div class="abs-b bgff text-center f28 pb10 pt10">
            提示：双方价格以协议为准
        </div>
        <model-info v-model="img_show"><img :src="img_info" @click="img_show=!img_show" style="width:100%"  /></model-info>
  </div>
</template>
<script>
import modelInfo from '@/components/modelInfo'
export default {
    components:{
        modelInfo
    },
    data(){
        return{
            img_show:false,
            img_info:'',
            info:{
                type:0,//状态，0查看，1签约
                contract_id:0, //合同ID
                require_id:0, //需求id
            },
            content:{}
        }
    },
    created(){
   
        this.info.contract_id = this.$route.query.cid;
        this.info.require_id = this.$route.query.rid;
        this.contractSignLook();
    },
    methods:{
        showImg(item){
            this.img_show = true;
            this.img_info = this.urlImg+item.b_img;
        },
        contractSignLook(){
           this.$indicator.open();
           this.$http({url:this.$api.order.contractSignLook},this.info).then(res=>{
                this.$indicator.close();
                if(res.Code=='0'){
                    if(this.info.type==1){
                        this.$toast("签约成功");
                        this.$router.push({path:'/orderList'});
                    }else{
                        this.content = res.Data;
                    }
                }else this.$toast(res.Msg);
            }) 
        }
    }
}
</script>

<style>
.txt-main{margin-right:0.4rem; width:6.6rem; height:3.5rem; background-color:#f0f0f0; color:#000; border:none;  border-radius: 0.15rem;}
.txt-num{position: absolute; top: 6.05rem; right: 0.55rem;}
.E-info{margin-right: .2rem; margin-top: 0.05rem; font-size:0.28rem; }
.E-info img{ vertical-align: middle; margin-right:0.1rem; border:1px solid #ddd;}
.E-info .E-name{position: absolute;}
</style>
